import { BasePage } from '@common/components/base-page'
import NavigationBar from '@components/navBar'
import List from '@components/list'
import { View, Input, Image } from '@tarojs/components'
import style from './index.module.scss'
import clearImg from '../../../assets/img/clear.png'

interface IProps { }
interface IState {
    keyWord: string;
    isWords: boolean
}
export default class Search extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            keyWord: '',
            isWords: false
        }
    }
    componentDidShow() {
    }
    onSearchClick = () => {

    }
    render() {
        const { keyWord, isWords } = this.state
        const handleInput = (e) => {
            if (e.target.value) {
                this.setState({
                    isWords: true,
                    keyWord: e.target.value
                })
            }else{
                this.setState({
                    isWords: false,
                    keyWord:''
                })
            }
        }
        return (
            <>
                <NavigationBar backPageShow={true} titleColor="black" barBackgroundColor='white' title="搜索"></NavigationBar>
                <View className={style.searchCon}>
                    <View className={style.searchView} onClick={this.onSearchClick}>
                        <View className={style.searchImage}></View>
                        {
                            isWords && <View className={style.img}></View>
                        }
                        {/* value={searchValue} */}
                        <Input onInput={handleInput} type="text" value={keyWord} confirmType="search" onConfirm={(event) => { }} placeholder='请输入关键字' placeholderClass={style.placeholder} style='font-size:24rpx;' />
                    </View>
                    <View className={style.searchBtn}>搜索</View>
                </View>
                <View className={style.listTop}>
                    <List progress={false} />
                </View>
            </>
        )
    }
}